<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统登录</title>
    <link href="/static/images/favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/login.css">
    <script src="/static/js/jquery-3.3.1.js"></script>
    <script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
</head>
<body>

<div class="container">


        <form class="form-signin" action="" method="post" novalidate>
            {% csrf_token %}
            <h2 class="form-signin-heading text-center">图书管理系统登录</h2>
            {% for field in form %}
                <div  class="form-control">
                    <label for="id_{{ field.name }}">{{ field.label }}</label>
                    {{ field }}
                    <span class="form-signin-heading err_msg text-center">{{ field.errors.0 }}</span>
                </div>
            {% endfor %}
            <input type="text" id="inputCode" class="form-control code" placeholder="验证码" name="code">
            <img src="{% url 'code_img' %}" alt="这是验证码图片" class="text-center code_img">
            <input type="submit" class="btn btn-lg btn-primary btn-block login_btn">
            <span class="form-signin-heading err_msg text-center text-danger">{{ ret.msg }}</span><br>
            <a class="btn btn-lg btn-primary btn-block login_btn" href="{% url 'register' %}">注册</a>
        </form>


{#    <form class="form-signin" action="{% url 'login' %}">#}
{#        {% csrf_token %}#}
{#        <h2 class="form-signin-heading text-center">图书管理系统登录</h2>#}
{#        <input type="text" id="inputUsr" class="form-control usr" placeholder="用户名">#}
{#        <input type="password" id="inputPassword" class="form-control pwd" placeholder="密码">#}
{#        <input type="text" id="inputCode" class="form-control code" placeholder="验证码" name="code">#}
{#        <img src="{% url 'code_img' %}" alt="这是验证码图片" class="text-center code_img"#}
{#             onclick="re_code()">#}
{#        <button class="btn btn-lg btn-primary btn-block login_btn" type="button">登录</button>#}
{#        <span class="form-signin-heading err_msg text-center"></span>#}
{#    </form>#}

{#    <form class="form-signin" action="" method="post" novalidate>#}
{#        {% csrf_token %}#}
{#        <h2 class="form-signin-heading text-center">图书管理系统登录</h2>#}
{#        <input type="text" class="form-control usr" name="username" minlength="4" required id="id_username"#}
{#               placeholder="用户名">#}
{#        <span class="form-signin-heading err_msg text-center">{{ form.errors.0 }}</span>#}
{#        <input type="password" class="form-control pwd" placeholder="密码" name="password" minlength="4" required#}
{#               id="id_password">#}
{#        <span class="form-signin-heading err_msg text-center">{{ form.errors.0 }}</span>#}
{##}
{#        <input type="text" id="inputCode" class="form-control code" placeholder="验证码" name="code">#}
{#        <img src="/code_img/" alt="这是验证码图片" class="text-center code_img">#}
{#        <input type="submit" class="btn btn-lg btn-primary btn-block login_btn">#}
{#        <span class="form-signin-heading err_msg text-center text-danger">{{ ret.msg }}</span><br>#}
{#        <a class="btn btn-lg btn-primary btn-block login_btn" href="/register/">注册</a>#}
{#    </form>#}


</div>
</body>
<script>
    function check() {
        let reUser = /^\w{4,20}$/;
        let vals = $('.usr').val();
        if (vals === "") {
            $('.err_msg').prop('style', '').html("用户名不能为空！").css('color', 'red').fadeTo(1000, 0.5);
            return
        } else {
            $('.err_msg').prop('style', '').html("")
        }
        if (reUser.test(vals)) {

            $('.err_msg').prop('style', '').html("")

        } else {
            $('.err_msg').prop('style', '').html("用户名是4-20位数字、字母和下划线！").css('color', 'red').fadeTo(1000, 0.5);
        }
    }

    $('.usr').on('blur', function () {
        check();
    });

    $('.code_img').on('click', function re_code() {
        let code_ele = $('.code_img');
        let new_src = "{% url 'code_img' %}" + Math.random();
        code_ele.prop('src', new_src);
        console.log(new_src)
    });
</script>
</html>